<template>
  <div class="x-intelligent-customer-service">
    <n-popover trigger="hover" placement="left">
      <template #trigger>
        <img :src="SvgCustomerService" />
      </template>
      <n-space vertical>
        <x-button @click="handleStoreCustomerService">商城问题咨询</x-button>
        <x-button @click="handleAdCustomerService">广告业务咨询</x-button>
      </n-space>
    </n-popover>
  </div>
</template>

<script setup lang="ts">
  import { XButton } from '@/components'
  import { NPopover, NSpace } from 'naive-ui'
  import SvgCustomerService from '@/assets/images/svg-customer-service.svg'

  function handleStoreCustomerService() {
    window.open('https://work.weixin.qq.com/kfid/kfc2512dbed42ceba26')
  }
  function handleAdCustomerService() {
    window.open('https://work.weixin.qq.com/kfid/kfceede472d5b46fbe9')
  }
</script>

<style scoped lang="scss">
  .x-intelligent-customer-service {
    position: fixed;
    right: 10px;
    bottom: 188px;
    z-index: 3;
    cursor: pointer;
    display: flex;
    align-items: center;
    img {
      width: 70px;
      height: 70px;
    }
  }
</style>
